<template>
  <div class="x-user-select">
    <div class="x-user-select_box">
      <el-input class="select_box-ipt" :readonly="true" v-model="selectText" @click="formInput"></el-input>
      <div class="el-input-group__append" @click="formInput">
        <el-button type="primary" icon="el-icon-search">选择会员</el-button>
      </div>
    </div>
    <el-dialog class="x-user-select_dialog" title="选择会员" width="70%" append-to-body v-el-drag-dialog top="5vh" :visible.sync="dialogFormVisible">
      <div v-loading="dataLoading" class="xtable-select">
        <div class="search-box">
          <el-input placeholder="请输入内容" v-model="keyword">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </div>
        <el-tree :default-checked-keys="defaultCheckedKeys" @check-change="handleCheckChange" ref="tree" :data="treeData" highlight-current show-checkbox node-key="value" :props="defaultProps">
        </el-tree>
      </div>
      <span slot="footer" class="x-user-select-footer">
        <div class="selectText">选择会员数不能超{{count}}个,超过时会自动过。已选数量：<x-code>{{selectCount}}</x-code>
        </div>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="select">确定选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/service/directives/el-dragDialog'
  export default {
    directives: { elDragDialog },
    model: {
      event: 'change',
      prop: 'dataModel'
    },
    name: 'x-user-select',
    props: {
      dataModel: {},
      isJson: {
        default: false
      },
      count: {
        default: 50 // 默认可选择的数量
      }
    },
    data () {
      return {
        viewModel: {},
        defaultCheckedKeys: [], // 默认选中的
        treeData: null,
        dialogFormVisible: false,
        dataLoading: false,
        selectText: '',
        selectCount: 0,
        async: false,
        keyword: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    mounted () {
      this.viewModel = this.dataModel
    },
    methods: {
      async search () {
        this.loading = true
        this.async = false
        this.viewModel = null
        var para = {
          keyword: this.keyword
        }
        var res = await this.$ala.httpGet('api/UserTree/TreeView', para)
        if (res) {
          this.treeData = res
        }
        this.async = true
        this.dataLoading = false
      },
      handleClose (tag) {
        this.tags = []
        this.viewModel = null
      },
      formInput () {
        this.dataLoading = true
        this.dialogFormVisible = true
        this.search()
      },
      handleCheckChange () {
        var selectKeys = this.$refs.tree.getCheckedKeys()
        this.selectCount = selectKeys.length
      },
      select () {
        this.viewModel = []
        this.selectText = ''
        this.dialogFormVisible = false
        var nodes = this.$refs.tree.getCheckedNodes()
        nodes.forEach((element, count) => {
          var index = element.label.indexOf(')')
          if (count < 5) {
            this.selectText += element.label.substring(0, index + 1) + '、'
          }
        })
        if (nodes.length > 1) {
          this.selectText = this.selectText + '等会员'
        }
        var selectKeys = this.$refs.tree.getCheckedKeys()
        if (this.isJson === true) {
          selectKeys.forEach((element, index) => {
            if (index < 50) {
              this.viewModel += element + '|'
            }
          })
        } else {
          this.viewModel = selectKeys
        }
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.$emit('change', this.viewModel)
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .x-user-select {
    .x-user-select_box {
      display: flex;
      align-items: center;
      .select_box-ipt {
        flex: 1;
        min-width: 0;
        .el-input__inner {
          height: 42px;
          line-height: 42px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      .el-input-group__append {
        width: 88px;
      }
    }
    .el-input-group__append {
      width: 150px;
    }
    .cuopoin {
      cursor: pointer;
      text-align: center;
    }
    .search-box {
      width: 80%;
      margin-left: 5%;
      margin-bottom: 10px;
    }
    .text-placeholder {
      color: #c0c4cc;
    }
  }
  .x-user-select_dialog {
    .xtable-select {
      max-height: 50vh;
      height: 100%;
      overflow: scroll;
      margin-top: 15px;
      border-bottom: 1px solid #e5e5e5;
      min-height: 30vh;
      padding: 0 30px;
    }
    .search-box {
      width: 550px;
    }
    .xtable-select::-webkit-scrollbar {
      width: 5px;
      height: 40px;
    }

    .xtable-select::-webkit-scrollbar-thumb {
      width: 5px;
      background-color: #dcdfe6;
      border-radius: 10px;
    }
    .selectText {
      font-size: 12px;
      color: #716aca;
      flex: 1;
      min-width: 0;
      text-align: left;
    }
    .x-user-select-footer {
      display: flex;
      align-items: center;
    }
    .el-dialog__footer {
      border-top: 1px solid #eaeefb;
    }
  }
</style>
